<script setup>
import { ref, computed, onMounted } from 'vue'
import { Moon, Sunny, Monitor } from '@element-plus/icons-vue'
import { isDark, setTheme } from '../utils/theme'
import { useRoute, useRouter } from 'vue-router'
import { showSuccess, showError } from '../utils/message'
import { useAuthStore } from '../stores/authStore'

const router = useRouter()
const authStore = useAuthStore()
const currentTheme = ref('auto')

const themes = [
  { label: '跟随系统', value: 'auto', icon: Monitor },
  { label: '浅色模式', value: 'light', icon: Sunny },
  { label: '深色模式', value: 'dark', icon: Moon },
]

const handleThemeChange = (theme) => {
  currentTheme.value = theme
  setTheme(theme)
  emit('update:isDark', theme === 'dark')
  showSuccess(`已切换到${themes.find(t => t.value === theme).label}`)
}

const handleLogout = async () => {
  const success = await authStore.logout()
  if (success) {
    router.push('/login')
  }
}

const props = defineProps({
  isCollapse: Boolean
})

const emit = defineEmits(['update:isCollapse', 'update:isDark'])

const toggleCollapse = () => {
  emit('update:isCollapse', !props.isCollapse)
}

// 添加计算属性获取当前主题对象
const currentThemeObj = computed(() => 
  themes.find(t => t.value === currentTheme.value) || themes[0]
)

const route = useRoute()

// 修改面包屑计算逻辑
const breadcrumbs = computed(() => {
  return route.matched
    .filter(item => item.meta?.title)
    .map(item => ({
      title: item.meta.title,
      path: item.path === '' ? '/' : item.path // 处理根路径
    }))
})

// 获取用户信息
onMounted(async () => {
  if (authStore.isLoggedIn() && !authStore.user) {
    await authStore.getUserInfo()
  }
})
</script>

<template>
  <el-header class="header-container">
    <div class="header-left">
      <el-button text @click="toggleCollapse">
        <el-icon :size="20"><Fold v-if="!isCollapse" /><Expand v-else /></el-icon>
      </el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item 
          v-for="item in breadcrumbs" 
          :key="item.path"
          :to="{ path: item.path }"
        >
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="header-right">
      <div class="theme-switch">
        <el-dropdown trigger="click" placement="bottom-end">
          <el-button class="theme-button">
            <el-icon>
              <component :is="currentThemeObj.icon" />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                v-for="theme in themes"
                :key="theme.value"
                :class="{ active: currentTheme === theme.value }"
                @click="handleThemeChange(theme.value)"
              >
                <el-icon>
                  <component :is="theme.icon" />
                </el-icon>
                <span style="margin-left: 8px">{{ theme.label }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-dropdown>
        <span class="user-info">
          <el-avatar 
            :size="32" 
            :src="authStore.user?.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" 
          />
          <span class="nickname">{{ authStore.user?.nickname || '用户' }}</span>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<style scoped>
.header-container {
  height: 56px;
  width: 100%;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: var(--el-bg-color);
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.el-dropdown-item.active {
  color: var(--el-color-primary);
}

.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
}

.theme-button {
  border: none;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 6px !important;
  color: var(--el-text-color-regular);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item.active) {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

:deep(.el-dropdown-menu__item:not(.active):hover) {
  color: var(--el-color-primary);
}

.el-icon {
  font-size: 16px;
}

.header-left .el-breadcrumb {
  --el-text-color-regular: var(--el-text-color-secondary);
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.nickname {
  font-size: 14px;
  color: var(--el-text-color-primary);
}
</style>